<template>
  <div class="index-container">
    <main>
      <router-view></router-view>
    </main>
    <nav>
      <ul>
        <router-link
          :to="{ path: '/index/mall' }"
          custom
          v-slot="{ isActive, navigate }"
        >
          <li :class="{active: isActive}" @click="navigate">服装MALL</li>
        </router-link>
        <router-link
          to="/index/my"
          custom
          v-slot="{ isActive, navigate }"
        >
          <li :class="{active: isActive}" @click="navigate">我的</li>
        </router-link>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  
}
</script>

<style scoped>
  .index-container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .index-container nav {
    height: 50px;
  }

  .index-container nav ul {
    border-top: solid 1px #ccc;
  }

  .index-container nav ul li.active {
    background-color: gray;
  }

  .index-container main {
    flex: 1;
  }

  ul {
    height: 50px;
    display: flex;
    border-bottom: solid 1px #ccc;
  }

  ul>li {
    flex: 1;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
  }

  ul>li.active {
    background-color: purple;
    color: #fff;
  }
</style>